<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.css0{
	height: 30px;
	border: solid aqua 1px;
	color: darkblue;
}
.css1{
	background-color: darkorchid;
}
.css2{
	color: coral;
}
</style>
</head>
<body>
	<div>bind指令针对class进行了增强：</div>
	
	<div id="app1">
		<p>1、支持传入JSON对象：</p>
		<div v-bind:class="{'css0' : hasCss0, 'css1' : hasCss1, 'css2' : hasCss2}">注意查看该DIV的CSS</div>
	</div>
	
	<div id="app2">
		<p>2、支持传入对象：</p>
		<div v-bind:class="dcss">注意查看该DIV的CSS</div>
	</div>
	
	<div id="app3">
		<p>3、支持JSON对象传入计算属性：</p>
		<div v-bind:class="{'css0' : hasCss0, 'css1' : hasCss1, 'css2' : hasCss2}">注意查看该DIV的CSS</div>
	</div>
	
	<div id="app4">
		<p>4、支持直接传入计算属性：</p>
		<div v-bind:class="dcss">注意查看该DIV的CSS</div>
	</div>
	
	<div id="app5">
		<p>5、支持直接传入计算方法(使用较少)：</p>
		<div v-bind:class="dcss()">注意查看该DIV的CSS</div>
	</div>
	
	<div id="app6">
		<p>6、支持传入数组以应用多个样式：</p>
		<div v-bind:class="[css0Name, 'css1', css2Name]">注意查看该DIV的CSS</div>
	</div>
	
	<div id="app7">
		<p>7、支持传入数组以应用多个样式，数组元素可以支持计算式：</p>
		<div v-bind:class="[css0Name, 'css1', hasCss2 ? 'css2' : '']">注意查看该DIV的CSS</div>
	</div>
	
	<div id="app8">
		<p>8、支持对象、数组混合使用：</p>
		<div v-bind:class="[{'css0' : hasCss0, 'css2': hasCss2}, css1Name]">注意查看该DIV的CSS</div>
	</div>
</body>
<script type="text/javascript">
//app1
var app1 = new Vue({
	el: '#app1',
	data: {
		hasCss0: true,
		hasCss1: false,
		hasCss2: false
	}
});
window.setInterval(function(){
	if(app1.hasCss1){
		app1.hasCss1 = false;
	}else{
		app1.hasCss1 = true;
	}
}, 1000);
window.setTimeout(function(){
	app1.hasCss2 = true;
}, 3000);

//app2
var app2 = new Vue({
	el: '#app2',
	data: {
		dcss: {
			'css0': true,
			'css1': true,
			'css2': true
		}
	}
});
window.setInterval(function(){
	if(app2.dcss.css1){
		app2.dcss = {
			'css0': true,
			'css1': false,
			'css2': false
		};
	}else{
		app2.dcss = {
			'css0': true,
			'css1': true,
			'css2': true
		};
	}
}, 1000);

//app3
var app3 = new Vue({
	el: '#app3',
	data: {
		hasCss0: true,
		hasCss1: false
	},
	computed: {
		hasCss2: function(){
			return this.hasCss1 ? false : true;  //css2和css1互斥
		}
	}
});
window.setInterval(function(){
	if(app3.hasCss1){
		app3.hasCss1 = false;
	}else{
		app3.hasCss1 = true;
	}
	//由于css2是由css1计算而来，css1改变时css2会相应改变。
}, 1000);

//app4
var app4 = new Vue({
	el: '#app4',
	data: {
		hasCss0: true,
		hasCss1: false,
		hasCss2: false
	},
	computed: {
		dcss: function(){
			return {
				'css0': this.hasCss0,
				'css1': this.hasCss1,
				'css2': this.hasCss2
			};
		}
	}
});
window.setInterval(function(){
	if(app4.hasCss1){
		app4.hasCss1 = false;
	}else{
		app4.hasCss1 = true;
	}
}, 1000);
window.setTimeout(function(){
	app4.hasCss2 = true;
}, 3000);

//app5
var app5 = new Vue({
	el: '#app5',
	methods: {
		dcss: function(){
			return {
				'css0': true,
				'css1': true,
				'css2': true
			};
		}
	}
});

//app6
var app6 = new Vue({
	el: '#app6',
	data: {
		css0Name: 'css0',
		css2Name: 'css2',
	}
});

//app7
var app7 = new Vue({
	el: '#app7',
	data: {
		css0Name: 'css0',
		hasCss2: true,
	}
});

//app8
var app8 = new Vue({
	el: '#app8',
	data: {
		hasCss0: true,
		css1Name: 'css1'
	},
	computed: {
		hasCss2: function(){
			return this.hasCss0 ? true : false;  //css2和css0相同
		}
	}
});
</script>
</html>
